<template>
	<view class="login-page">
	  <view class="logo">
		 <text class="iconfont icon-yinle logo-icon"></text>
	  </view>
	  <view class="login-way">
		  <view class="local-login">
			  <navigator url="/pages/login/login_form" open-type="reLaunch">
				<button class="mobile">手机号登录</button>
			  </navigator>
			  <navigator url="/pages/login/login_form" open-type="reLaunch">
			    <button class="mobile">邮箱登录</button>
			  </navigator>
		  </view>
	  	  <view class="thrid-login">
			  <text class="iconfont icon-weixin"></text><text class="iconfont icon-QQ-circle-fill"></text><text class="iconfont icon-weibo-copy"></text>
	  	  </view>
	  </view>
      <view class="user-agreement">
     	<checkbox-group @change="agreement">
      		<label>
				<!-- #ifndef APP-PLUS || H5 -->
				    <checkbox class="agree-checkbox" value="true" color="red"></checkbox>同意<text>用户协议</text>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS || H5-->
				   <checkbox class="agree-checkbox" value="true" color="#ffff"></checkbox>同意<text>用户协议</text>
				<!-- #endif -->
      		</label>
      	</checkbox-group>
      </view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			agreement(v){
				console.log(v)
			}
		}
	}
</script>

<style lang="scss" scoped>
.login-page{
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #dd001b;
  .logo{
	 position: absolute;
	 left: 50%;
	 top: 30%;
	 text-align: center;
	 width: 128rpx;
	 height: 128rpx;
	 line-height: 128rpx;
	 transform: translateX(-50%);
	 background-color: red;
	 border-radius: 50%;
	 .logo-icon{
		 font-size: 64rpx !important;
		 color: #fff;
	 }
  }
  .login-way{
	  box-sizing: border-box;
	  padding: 20rpx 100rpx;
	  position: absolute;
	  left: 0;
	  top: 60%;
	  width: 100%;
	  .local-login{
		 margin-bottom: 20rpx;
		 button{
			 margin-bottom: 20rpx;
			 height: 64rpx;
			 line-height: 64rpx;
			 border-radius: 32rpx;
			 font-size: 28rpx;
			 color: red;
		 }
	  }
	  .thrid-login{
		padding: 20rpx 0;
		display: flex;
		justify-content:space-around;
		text{
			padding: 2px;
			font-size: 40rpx;
			color: #fff;
			border-radius: 50%;
			box-shadow: 2rpx 2rpx 2rpx rgba($color: #fff, $alpha: 1);
		}
	}
  }
  .user-agreement{
	position: absolute;
	left: 0;
	bottom: 100rpx;
	width: 100%;
	text-align: center;
	font-size: 22rpx;
	::v-deep.uni-checkbox-input{
		width: 22rpx;
		height: 22rpx;
		border-color: #fff;
		background-color: rgba($color: red, $alpha: .5);
	}
	label{
		margin:0 10rpx;
		color: #ccc;
	}
	text{
		color: #fff;
	}
  }
}
</style>
